<template>
	<view class="center bff">
		<view class="logo" :hover-class="!login ? 'logo-hover' : ''">
			<view class="log-center">
				<image class="logo-img" :src="login ? userInfo.avatar :avatarUrl"></image>
				<view class="logo-title" style="margin-top: 0;">
					<view>
						<text class="logo-role" v-if="!userInfo.is_maintenance">用户</text>
						<text class="logo-role" v-if="userInfo.is_maintenance">维保用户</text>
						<text>{{userInfo.nickname}}</text>
						<!-- <uni-rate :readonly="true" :value="5" size="12" /> -->
					</view>
					<view style="color: #FFFFFF; font-size: 30rpx;margin-top: 40rpx;" v-if="!login"
						@click="jumpTo2('/pages/login/index')">
						您还未登录,立即登录
					</view>
					<view v-if="login">ID：<text class="tcolor">{{userInfo.uid}}</text></view>
					<view v-if="login"> 积分：<text class="tcolor">{{userInfo.integral}}分</text></view>
					<!-- <text class="uer-name">{{login ?'Hi,'+ userInfo.nickName : '注册/登录'}}师父</text> -->
				</view>
				<view v-if="login" class="logo-edit" @click="jumpTo('/pages/sf/zlbj/zlbj')">账户编辑</view>
			</view>
		</view>
		<!-- 	<view class="flex " style="background-color:#f4f4f4;margin-top: 10rpx;">
			<image src="http://xiaowen.cool:86/bst/u1.png"
				style="width: 100%;height: 150rpx; padding: 0 5%;background-color: #FFFFFF;"></image>
		</view> -->
		<view class="center-list box-s3">
			<view class="center-list-item border-bottom" @click="jumpTo('/pages/sf/sbgl/sbgl')">
				<image src="../../../static/sb.png" class="icon"></text>
					<text class="list-text">设备台账</text>
					<text class=" iconfont navigat-arrow">&#xe660;</text>
			</view>
			<view class="center-list-item border-bottom" @click="jumpTo('/pages/users/yqhy/index')">
				<image src="../../../static/yqhy.png" class="icon"></text>
					<text class="list-text">邀请好友</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>
			<!-- </view>
		<view class="center-list"> -->
			<view class="center-list-item " @click="jumpTo('/pages/users/sqkp/index')">
				<image src="../../../static/sqfp.png" class="icon"></text>
					<text class="list-text">申请开票</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>
			<!-- <view class="center-list-item border-bottom " @click="jumpTo('/pages/users/fatie/index')">
				<image  src="../../../static/ftjl.png" class="icon"></text>
				<text class="list-text">发帖记录</text>
				<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>
			<view class="center-list-item" @click="jumpTo('/pages/users/fankui/index')">
				<image  src="../../../static/wtfk.png" class="icon"></text>
				<text class="list-text">问题反馈</text>
				<text class="navigat-arrow iconfont">&#xe660;</text>
			</view> -->
		</view>

		<view class="center-list box-s3">
			<view class="center-list-item border-bottom" @click="jumpTo('/pages/users/userrule/index')">
				<image src="../../../static/yhxy.png" class="icon"></text>
					<text class="list-text">用户协议</text>
					<text class=" iconfont navigat-arrow">&#xe660;</text>
			</view>
			<view class="center-list-item border-bottom" @click="callphone">
				<image src="../../../static/lxkf.png" class="icon"></text>
					<text class="list-text">联系客服</text>
					<text class="list-phone">{{kfphone}}</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>
			<view class="center-list-item border-bottom" @click="jumpTo('/pages/users/wtfk/index?type=1')">
				<image src="../../../static/yhxy.png" class="icon"></text>
					<text class="list-text">问题反馈</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>
			<!-- </view>
		<view class="center-list"> -->
			<view class="center-list-item border-bottom" @click="jumpTo('/pages/users/swhz/index')">
				<image src="../../../static/swhz.png" class="icon"></text>
					<text class="list-text">商务合作</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>
			<view class="center-list-item  " @click="jumpTo('/pages/sf/set/set')">
				<image src="../../../static/shezhi.png" class="icon"></text>
					<text class="list-text">设置</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>
			<!-- <view class="center-list-item" @click="jumpTo('/pages/users/fankui/index')">
				<image  src="../../../static/wtfk.png" class="icon"></text>
				<text class="list-text">问题反馈</text>
				<text class="navigat-arrow iconfont">&#xe660;</text>
			</view> -->

		</view>
		<view style="height: 150rpx;"></view>
	</view>
	</view>
</template>

<script>
	import {
		get_openid,
		Login,
		user_info,
		getkefuPhone,
		getUserProgress
	} from '../../../api/api.js'
	export default {
		props: {
			userInfo: {
				type: Object
			}
		},
		data() {
			return {
				login: false,
				avatarUrl: "http://xiaowen.cool:86/bst/avatar.png",
				statusBarHeight: "",
				kfphone: "",
			}
		},

		created() {
			this.getUserProgress()
			this.getkefuPhone()
			this.login = uni.getStorageSync('login')
			this.statusBarHeight = uni.getStorageSync('statusBarHeight')
			console.log('用户个人中心', this.statusBarHeight)
			console.log(this.login, '登录状态')
		},
		watch: {
			userInfo(now, past) {
				this.userInfo = now,
					console.log('监听变化', now)
			}
		},
		methods: {
			// 获取资料完成度
			getUserProgress(){
				getUserProgress().then(res=>{
					console.log('资料完成度',res.data)
				})
			},
			// call客服
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.kfphone
				});
			},
			// 获取客服电话
			getkefuPhone() {
				getkefuPhone().then(res => {
					this.kfphone = res.msg
				})
			},
			tologin() {
				if (this.login) return
				const _this = this;
				uni.getUserProfile({
					desc: '用于完善资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						_this.login = true
						_this.onGotUserInfo()
						console.log('用户信息', res.userInfo)
						wx.setStorageSync('userInfo', res.userInfo);
						_this.userInfo = wx.getStorageSync('userInfo', res.userInfo)
						wx.setStorageSync('hasUserInfo', true);
					},
					fail: (err) => {
						console.log('err', err);
					}
				})
			},
			// 跳转
			jumpTo2(e) {
			
				uni.redirectTo({
					url: e
				})
			
			
			},
			// 跳转
			jumpTo1(e) {

				uni.navigateTo({
					url: e
				})


			},
			// 跳转
			jumpTo(e) {
				if (!this.login) {
					uni.showModal({
						title: '提示',
						content: "您当前尚未登录!登录后可体验更好的服务!",
						showCancel: true,
						confirmText: "去登录",
						success: (res => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/index"
								})
							} else {

							}
						})
					})
				} else {
					uni.navigateTo({
						url: e
					})
				}

			}
		}
	}
</script>

<style scoped lang="less">
	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}



	.log-center {
		margin-top: 0upx;
		width: 100%;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		/* margin-left: 50%; */
		/* transform: translateX(-50%); */
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		display: block;
		/* position: absolute; */
		/* top: 250rpx; */
		font-size: 26rpx;
		margin-left: 30upx;
		margin-top: 50upx;
		/* left: 50%; */
		/* transform: translateX(-50%); */

		/* flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx; */
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		/* width: 750upx; */
		border-radius: 15rpx;
		margin-left: 50%;
		transform: translateX(-50%);
		margin-top: 60upx;
		width: 90%;
		/* border-radius: 30rpx; */
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		/* width: 750upx; */
		box-sizing: border-box;
		margin-top: 20rpx;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #E1E1E1;
		border-bottom-style: solid;
	}

	/* 	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #4cd964;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	} */

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 28rpx;
		margin-left: 15rpx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.list-phone {
		height: 90upx;
		line-height: 90upx;
		font-size: 28rpx;
		color: #777777;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		/* font-family: texticons; */
	}

	.icon {
		width: 45upx;
		height: 45upx;
		margin-top: 26upx;
	}

	.logo {
		// background: url('http://xiaowen.cool:86/yjky/yjkybg.png');
		background-size: cover;
		width: 750upx;
		height: 210upx;
		background-position-y: -160rpx;
		padding: 30upx;
		box-sizing: border-box;
		background-color: #029E8E;
		flex-direction: row;
		align-items: center;
	}

	.log-center {
		margin-top: 0upx;
		width: 100%;
		position: relative;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		/* margin-left: 50%; */
		/* transform: translateX(-50%); */
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		color: #fff;
		display: block;
		/* align-items: center; */
		/* position: absolute; */
		/* top: 250rpx; */
		/* font-size: 26rpx; */
		margin-left: 30upx;
		/* margin-top: 70upx; */
		/* left: 50%;
		/* transform: translateX(-50%); */

		/* flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx; */
	}

	.logo-title view {
		display: flex;
		align-items: center;
	}

	.logo-title view>text {
		margin-right: 5px;
	}

	.logo-title .logo-role {
		font-size: 20rpx;
		color: #007AFF;
		padding: 0 3px;
		background: #fff;
	}

	.logo-edit {
		position: absolute;
		right: -30rpx;
		top: 10rpx;
		font-size: 22rpx;
		padding: 0 24rpx;
		color: #007AFF;
		border-top-left-radius: 27rpx;
		border-bottom-left-radius: 27rpx;
		background: #fff;
	}

	.tcolor {
		color: #FFB400;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}
</style>
